<template>
  <div class="contaienr-page-blog-editer">
    <el-form>
      <el-form-item label="标题">
        <el-input />
      </el-form-item>
      <el-form-item label="标签">
        <el-select v-model="tags" class="item-tags" multiple filterable allow-create default-first-option placeholder="输入标签,按回车确定" @change="tagChangeHandler" /></el-select></el-form-item>
      <el-form-item>
        <mavon-editor :value="value" @imgAdd="uploadImageHandler" @imgDel="deleteImageHandler" @change="editChangeHandler" @save="editSaveHandler" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// utils
import { parseTime } from '@/utils/index.js';

export default {
  data() {
    return {
      value: ``,
      tags: ''
    };
  },
  methods: {
    async uploadImageHandler(fileName, file) {
      console.log(fileName, file);
    },
    async deleteImageHandler(fileName) {
      console.log(fileName);
    },
    editChangeHandler(value) {
      console.log(value);
    },
    editSaveHandler(value) {
      const time = parseTime(Date.now(), '{y}-{m}-{d} {h}:{i}:{s} ');
      const head = `--- \ntitle: Hexo安装日志 \ndate: ${time} \ntags: 日志 \n--- \n\n`;
      const submitData = head + value;
      console.log(submitData);
    },
    tagChangeHandler(value) {
      console.log(value);
    }
  }
};
</script>

<style lang="scss" scoped>
.item-tags{
  width: 100%;
}
</style>
